<template>
  <!-- {{ appList }} -->
  <div class="apps">
    <a
      :href="`${app.url}?token=${token}&id=${app.id}`"
      class="app"
      v-for="(app, index) in appList"
      :key="index"
      :ref="`ref_app${index}`"
    >
      <div class="">
        <img :src="require(`@/assets/img/Subsystem/${app.icon}.png`)" />

        <div>
          {{ app.name }}
        </div>
      </div>
    </a>
  </div>
</template>
<script>
import {
  reactive,
  toRef,
  toRefs,
  getCurrentInstance,
  inject,
  onMounted,
} from "vue";

export default {
  name: "SideEntrance",
  props: {
    appList: {
      type: Array,
      default: [],
    },
  },
  // context
  setup(props, { attrs, slots, emit }) {
    let token = inject("token");
    const { ctx } = getCurrentInstance();
    onMounted(() => {
      // console.log(ctx.$refs);
    });
    return { token };
  },
};
</script>


<style lang="scss" scoped>
.apps {
  display: flex;
  flex-wrap: wrap;
  .app {
    width: 300px;
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.5s;
    border: 1px solid #f1f1f1;
    transform: translate3d(0, -2px, 0);
    img {
      width: 220px;
      height: 120px;
      transition: all 0.5s;
      transform: scale(0.8);
    }
    &:hover {
      color: #409eff;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      img {
        transform: scale(1);
      }
    }
  }
}

// .apps {
//   display: flex;
//   width: 90vw;
//   flex-wrap: wrap;

//   .app {
//     width: 220px;
//     margin: 20px;
//     height: 160px;
//     text-align: center;
//     display: flex;
//     overflow: hidden;
//     position: relative;
//     transform: translate3d(0, -2px, 0);
//     border-radius: 8px;
//     transition: 0.5s;
//     font-size: 16px;
//     border: 1px solid #f1f1f1;
//     color: #303133;
//     &:hover {
//       z-index: 2;
//       transition: 0.5s;
//       background: #f5f5f5;
//       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
//       transform: translate3d(0, -5px, 0);
//     }
//     img {
//       width: 220px;
//       height: 120px;
//       transition: 0.5s;
//       margin-bottom: 10px;
//       transform: scale(1.1);
//     }
//     &:hover img {
//       transform: scale(1);
//       border-radius: 0 0 25% 25%;
//     }
//   }
// }
</style>